<template>
  <el-dialog
    v-model="visible"
    title="同步数据库"
    width="400px"
    append-to-body
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    @closed="handleClosed"
  >
    <el-radio-group v-model="dropFlag">
      <el-radio value="false" size="large" label="普通同步（仅比对修改表结构）" />
      <el-radio value="true" size="large" label="强制同步（删除表后重建）" />
    </el-radio-group>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false"> 取消 </el-button>
        <el-button type="primary" :loading="loading" @click="handleConfirm"> 开始同步 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ref, computed, defineProps, defineEmits } from 'vue';
  import { sycDbTable } from '@/api/web/bu/form';
  import modal from '@/plugins/modal';

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    tableId: {
      type: Number,
      default: null,
    },
  });
  const emits = defineEmits(['update:modelValue']);

  const loading = ref(false);
  const dropFlag = ref('false');

  const visible = computed({
    set(v) {
      emits('update:modelValue', v);
    },
    get() {
      return props.modelValue;
    },
  });

  function handleConfirm() {
    loading.value = true;
    const params = {
      tableId: props.tableId,
      dropFlag: dropFlag.value,
    };
    sycDbTable(params)
      .then((res) => {
        visible.value = false;
        modal.msg(res.msg);
      })
      .finally(() => {
        loading.value = false;
      });
  }

  function handleClosed() {
    loading.value = false;
    dropFlag.value = 'false';
  }
</script>
